<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>00_Canvas-坐标系</title>
  <!-- 
  在 HTML5 Canvas 中，通常涉及两个主要的坐标系：用户坐标系和设备坐标系。理解这两个坐标系对于在 Canvas 上进行绘图和处理图形非常重要。
  1. 用户坐标系（User Coordinate System）
  - 定义：用户坐标系是 Canvas 中绘图时使用的坐标系。它是开发者定义的坐标系统，通常是以像素为单位。
  - 特点：
    - 原点：位于 Canvas 的左上角，坐标 (0, 0) 表示 Canvas 的左上角。
    - 正方向：X 轴向右为正方向，Y 轴向下为正方向，这与传统数学坐标系相反。
    - 可变性：用户坐标系可以通过  `translate` 、 `rotate`  和  `scale`  等变换方法进行调整，使得绘图更加灵活。

  2. 设备坐标系（Device Coordinate System）

  - 定义：设备坐标系是指 Canvas 在屏幕上的实际像素坐标。它与用户坐标系的关系取决于 Canvas 的大小和缩放设置。
  - 特点：
    - 原点：同样位于 Canvas 的左上角。
    - 分辨率：设备坐标系的分辨率与显示设备的物理分辨率相关，可能会受到设备 DPI（每英寸点数）的影响。
    - 缩放：在某些情况下，用户坐标系和设备坐标系之间的关系可能会因为 CSS 样式或屏幕缩放而有所不同。

  3. 坐标系之间的转换
  在使用 Canvas 绘图时，可能需要在用户坐标系和设备坐标系之间进行转换。通常情况下，开发者主要使用用户坐标系进行绘图，但在处理图形时，理解设备坐标系的影响是很重要的。

  4. 使用示例
  以下是一个简单的示例，展示如何在 Canvas 中使用用户坐标系进行绘图：
  <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000;"></canvas>
  <script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 绘制一个矩形
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 100, 100); // 在 (10, 10) 位置绘制蓝色矩形

  // 移动坐标系原点
  ctx.translate(150, 0);

  // 绘制另一个矩形
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 100, 100); // 在新的坐标系中绘制红色矩形
  </script>
  
  5. 总结
  在 Canvas 中，用户坐标系和设备坐标系是两个重要的概念。用户坐标系是开发者绘图时使用的坐标系统，而设备坐标系则是 Canvas 在屏幕上的实际像素坐标。理解这两个坐标系及其转换关系，可以帮助开发者更好地进行图形绘制和处理。
  -->
</head>
<body>
  
</body>
</html>